import React from 'react';
import { connect } from 'dva';
import { Spin, Row, Col, Modal, Button } from 'antd';
import styles from './Main.css';

import Card from '../../components/CardProcess/Card'

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            ready: true,
            loading: false, // true 显示加载动画
            checkAll: false, // false 为 显示部分功能
            left: 0,
            visible: false,
            target: 'left',
            modalTitle: null,  // 模态框的标题
            componentName: null, // 模态框内  组件名称
        }
    }
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                loading: false
            })
        }, 1000);
    }

    handleClick(event) {
        const t = event.target.getAttribute('data-id')
        if (this.state.target === t) {
            return false;
        } else {
            setTimeout(() => {
                this.setState({
                    checkAll: !this.state.checkAll,
                })
            }, 600);
            this.setState({
                left: this.state.left === 0 ? '-100%' : 0,
                target: t
            })
        }

    }

    handleOpenDetail(event) {
        console.log(event.target);
        const ModalTitle = event.target.getAttribute('modal-title')
        const viewName = event.target.getAttribute('modal-componentname');
        this.setState({
            visible: true,
            modalTitle: ModalTitle,
            componentName: viewName,
        })
    }

    ReturnView = () => {
        const componentKey = this.state.componentName;
        switch (componentKey) {
            case 'card':
                return <Card />
            case 'Main':
                return <Card />

            default:
                return null;
        }
    }

    render() {
        const actionLeft = this.state.checkAll ? { cursor: 'pointer', color: 'rgb(255, 204, 102)', fontWeight: 200 } : null;
        const actionRight = this.state.checkAll ? null : { cursor: 'pointer', color: 'rgb(255, 204, 102)', fontWeight: 200 };
        return (
            <div className={styles.window}>
                {
                    this.state.loading === true
                        ?
                        <div className={styles.spin}>
                            {/* 加载指示器 */}
                            <Spin size='large' tip='loading' />
                        </div>
                        :
                        <div className={styles.container}>
                            {/* 内容区 */}
                            <h3 className={styles.h3}>天山农村商业银行 智能终端</h3>
                            <div className={this.state.checkAll ? styles.setLeft : null}>
                                <p className={styles.leftP} style={actionLeft} data-id='left' onClick={this.handleClick.bind(this)}>
                                    {this.state.checkAll ? <i>《</i> : null}
                                    常用功能
                                </p>
                                <p className={styles.rightP} style={actionRight} data-id='right' onClick={this.handleClick.bind(this)}>
                                    全部业务
                                    {this.state.checkAll ? null : <i>》</i>}
                                </p>
                                <div style={{ clear: 'both' }}></div>
                            </div>
                        </div>
                }
                {/* Grad */}
                <div className={styles.grad}>
                    <div style={{ position: 'relative', width: '200%', left: this.state.left, transition: 'left ease-in-out 0.6s' }}>
                        <div className={styles.gradItems}>
                            <div className={styles.center}>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols} modal-title="办卡流程" modal-componentname="card" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="领取产品" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="农商行转账汇款" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                </Row>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols} modal-title="人行跨行转账汇款" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="开通电子银行" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="开通农商行信使" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                </Row>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols} modal-title="查询余额" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                </Row>
                            </div>
                        </div>
                        <div className={styles.gradItems}>
                            <div className={styles.center}>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols} modal-title="业务查询" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="账户开立及补办服务" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="电子银行及互联网服务" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                </Row>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols} modal-title="理财业务" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="存取" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="其他业务" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                </Row>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols} modal-title="补登折" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="便民服务" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                    <Col span={7} className={styles.cols} modal-title="缴费业务" onClick={this.handleOpenDetail.bind(this)} ></Col>
                                </Row>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 模态框 */}
                {/* <Modal
                    title={this.state.modalTitle}
                    wrapClassName="vertical-center-modal"
                    visible={this.state.visible}
                    onCancel={() => this.setState({
                        visible: false
                    })}
                    bodyStyle={{ height: 600, overflowY: 'scroll' }}
                    width={1100}
                    footer={
                        <Button
                            key="back"
                            onClick={() => this.setState({
                                visible: false
                            })}
                        >
                            关闭
                        </Button>
                    }
                >
                    {this.ReturnView()}
                </Modal> */}
            </div>
        );
    }
}



export default connect()(App);